import http from '../utils/http'
import React, {useState, useEffect} from "react"
import "../video/video.module.css"

const Test = () => {
    const [list, setList] = useState([])
    const [selectedVideo, setSelectedVideo] = useState(null) // 当前选中的视频
     
    const gitVideo = () => {
        http.get('/videos').then((res) => {
            console.log(res.data.videos)
            setList(res.data.videos)
        })
    }

    useEffect(() => {
        gitVideo()
    }, [])

    // 关闭模态框
    const closeModal = () => {
        setSelectedVideo(null)
    }

    return (
        <div style={{ padding: "20px" }}>
            <h2>视频列表</h2>
            <div style={{ display: "flex", flexWrap: "wrap", gap: "15px" }}>
                {list.map((item, index) => (
                    <div key={index} style={{ cursor: "pointer" }} onClick={() => setSelectedVideo(item.videoUrl)}>
                        <video 
                            src={`http://localhost:3333/${item.videoUrl}`} 
                            style={{ width: "200px", height: "auto", borderRadius: "8px" }}
                            muted
                        />
                        <p style={{ textAlign: "center", margin: "5px 0" }}>点击播放</p>
                    </div>
                ))}
            </div>

            {/* 模态框 - 点击视频后显示全屏播放 */}
            {selectedVideo && (
                <div style={{
                    position: "fixed",
                    top: 0,
                    left: 0,
                    width: "100%",
                    height: "100%",
                    backgroundColor: "rgba(0, 0, 0, 0.8)",
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                    zIndex: 1000
                }} onClick={closeModal}>
                    <div style={{ position: "relative" }} onClick={(e) => e.stopPropagation()}>
                        <button 
                            style={{
                                position: "absolute",
                                top: "-40px",
                                right: "0",
                                background: "none",
                                border: "none",
                                color: "white",
                                fontSize: "24px",
                                cursor: "pointer"
                            }} 
                            onClick={closeModal}
                        >
                            ×
                        </button>
                        <video
                            src={`http://localhost:3333/${selectedVideo}`}
                            style={{ maxWidth: "90vw", maxHeight: "80vh" }}
                            controls
                            autoPlay
                            loop
                        />
                    </div>
                </div>
            )}
        </div>
    )
}

export default Test